<template>
  <div class="followers-page column pages">
    <div class="row full-width">
      <div class="title q-mr-md">Followers</div>
      <q-input
        v-model="searchString"
        outlined
        dense
        rounded
        class="col"
        label="Search"
        color="sub"
      >
        <template v-slot:prepend>
          <q-icon name="search" />
        </template>
        <template v-slot:append>
          <q-icon
            v-if="searchString !== ''"
            name="close"
            @click="searchString = ''"
            class="cursor-pointer"
          />
        </template>
      </q-input>
      <q-space class="col-1"></q-space>
      <div class="row items-center justify-end">
        <q-btn
          dense
          flat
          round
          :icon="showFilterBox ? 'mdi-filter-remove' : 'mdi-filter-menu'"
          color="sub"
          @click="showFilterBox = !showFilterBox"
        />
        <q-btn dense flat round icon="mdi-sort-variant" color="sub">
          <q-menu auto-close>
            <q-list dense>
              <q-item clickable @click="sortBy(1)">
                <q-item-section>Recent update</q-item-section>
              </q-item>
              <q-item clickable @click="sortBy(2)">
                <q-item-section>Most recent</q-item-section>
              </q-item>
              <q-item clickable @click="sortBy(3)">
                <q-item-section>Most popular</q-item-section>
              </q-item>
              <q-item clickable @click="sortBy(4)">
                <q-item-section>Most compliments</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>
    </div>
    <div class="filter-box row q-mb-md" v-if="showFilterBox">
      <q-space />
      <q-btn-dropdown no-caps flat dense label="Language" color="sub">
        <q-list dense>
          <q-item
            clickable
            v-close-popup
            v-for="lang in languages"
            :key="lang.code"
          >
            <q-item-section>
              <q-item-label>{{ lang.label }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
      <q-btn-dropdown no-caps flat dense label="Creator" color="sub">
        <q-list dense>
          <q-item clickable v-close-popup>
            <q-item-section>
              <q-item-label>Video Only</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable v-close-popup>
            <q-item-section>
              <q-item-label>Audio Only</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable v-close-popup>
            <q-item-section>
              <q-item-label>No content</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </div>
    <div v-else class="q-mb-md" />
    <div class="column q-gutter-y-md">
      <follower-item v-for="user in followers" :key="user.id" :user="user" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import FollowerItem from './FollowerItem.vue';
import User from 'src/models/User';
import LanguageConfig from 'src/models/LanguageConfig';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const userStore = useUserStore();
const globalStore = useGlobalStore();
const searchString = ref('');
const showFilterBox = ref(false);
const followers = ref<User[] | undefined>([]);
const rawFollowers = computed(() => userStore.myFollowers);
const languages = computed<LanguageConfig[]>(() => globalStore.languageConfig);

onMounted(async () => {
  await userStore.getMyFollowers({
    page: 1,
    size: 20,
  });
  followers.value = rawFollowers.value;
});
function sortBy(type: number) {}
</script>
<style lang="sass" scoped>

.followers-page
  width: 100%
  .title
    font-size: 22px
</style>
